<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
	<div v-if="pageFlag">
		<InfoCard :info='intro' />
	</div>
	<Reacquire v-else @onclick="getData" line-height="200px">
		重新获取
	</Reacquire>
</template>

<script>
	import {
		currentGET
	} from 'api/modules'
	import {
		Value
	} from 'sass';
	import station from './station.js';

	let style = {
		fontSize: 24
	}
	export default {
		data() {
			return {
				pageFlag: false,
				stationId: 5605,
				intro: {}
			};
		},
		created() {
			this.getData();
			station.$on('stationId', val => {
				this.stationId = val;
				this.getData();
			})
		},
		mounted() {
			station.$on('stationId', val => {
				this.stationId = val;
			})
		},
		beforeDestroy() {
			station.$off('stationId');
		},
		methods: {
			getData() {
				currentGET("info", {
					stationId: this.stationId
				}).then((res) => {
					if (res.flag) {
						this.pageFlag = true;
						this.intro = res.data
					} else {
						this.pageFlag = false;
						this.$Message.warning(res.msg);
					}
				});
			},
		},
	};
</script>
<style lang='scss' scoped>
	.user_Overview {
		li {
			flex: 1;

			p {
				text-align: center;
				height: 16px;
				font-size: 16px;
			}

			.user_Overview_nums {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				font-size: 22px;
				margin: 50px auto 30px;
				background-size: cover;
				background-position: center center;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				&.bgdonghua::before {
					animation: rotating 14s linear infinite;
				}
			}

			.allnum {

				// background-image: url("../../assets/img/left_top_lan.png");
				&::before {
					background-image: url("../../assets/img/left_top_lan.png");

				}
			}

			.online {
				&::before {
					background-image: url("../../assets/img/left_top_lv.png");

				}
			}

			.offline {
				&::before {
					background-image: url("../../assets/img/left_top_huang.png");

				}
			}

			.laramnum {
				&::before {
					background-image: url("../../assets/img/left_top_hong.png");

				}
			}
		}
	}
</style>